<template>
  <div class="flex vertical apply-box">
    <!-- <h3 class="border-bottom page-title">{{title}}</h3> -->
    <div class="flex-1 apply-cont">
      <app-view ref="applyComp" :curForm="currentForm" :applyForm="form"></app-view>
    </div>

    <div class="flex justify-between align-center border-top apply-btns">
      <vant-button round ro type="danger" @click="prev" :disabled="active===0" >上一步</vant-button>
      <vant-button round type="danger" @click="next" v-if="!showSubmitBtn" >下一步</vant-button>
      <vant-button round type="danger" @click="submit" v-else class="w-3em">提交</vant-button>
    </div>
  </div>
</template>

<script>
import { deepClone } from '@utils/index'
import { saveGovApplication } from '@apis/apply'
import { Vant } from '@components/Vant/index'
const { Toast } = Vant
// import {routes} from '@/router/index'
export default {
  components: {
    appView: () => import("@components/View/index.vue")
  },
  name: "Apply",
  data() {

    // const list= routes.find(item=>item.path==='/').children.find(item=>item.path==='apply').children
    const list = this.$router.matcher.getRoutes().filter(item => item.path.startsWith('/apply/'))

    const { path = '' } = this.$route
    let active = list.findIndex(route => route.path === path);
    active < 0 && (active = 0);

    return {
      list,
      active,
      form: {}
    }
  },
  watch: {
    '$route.path'(path) {
      let active = this.list.findIndex(route => route.path === path);
      active < 0 && (active = 0);
      this.active = active
    }
  },
  computed: {
    compName() {
      return this.$route.name;
    },
    currentForm() {
      return this.form[this.compName] || {}
    },
    title() {
      return this.$route.meta.title
    },
    showSubmitBtn() {
      return this.active === this.list.length - 1
    }
  },
  methods: {
    toPage(style = 'push') {
      const i = this.active
      const route = this.list[i];
      const currentPath = this.$route.path
      if (currentPath === route.path) {
        return;
      }

      if (style === 'push') {
        this.$router.push(route)
      } else if (style === 'back') {
        this.$router.back();
      }
    },
    prev() {
      let { active } = this;
      if (--active < 0) {
        active = 0
      }
      this.active = active;
      this.toPage('back')
    },
    submit() {
      this.saveCurForm().then(() => {
        const {
          ApplyCargo,
          ApplyVehicleList,
          ApplyOverAll,
          ApplyGeneralInfo,
          ApplyAgent,
          ApplyOther
        } = deepClone(this.form);
        delete ApplyAgent._immediateSearch
        const submitData = {
          cargo: ApplyCargo,
          vehicleList: ApplyVehicleList.map(item => {
            delete item._id
            delete item._immediateSearch

            item.driveImgKeys = item.driveImgKeys.split(',');
            return item;
          }),// reqNo
          overAll: {
            ...ApplyOverAll,
            totalTyres: ApplyVehicleList.reduce((n, { tyres }) => n + (+tyres), 0),
            totalAxles: ApplyVehicleList.reduce((n, { axles }) => n + (+axles), 0),
            totalImg: ApplyOther.totalImg
          },// reqNo
          generalInfo: {// reqNo
            beginDist: ApplyGeneralInfo.beginDist,
            endDist: ApplyGeneralInfo.endDist,
            startDate: ApplyGeneralInfo.startDate,
            endDate: ApplyGeneralInfo.endDate,
            passThrough: ApplyGeneralInfo.passThrough,
            passDists: ApplyGeneralInfo.passDists.map(({ distCode }) => ({ distCode })).join(',')// reqNo
          },
          routeDTO: ApplyGeneralInfo.passDists.map(({ beginPoint, distCode, endPoint, routeDesc }) => ({ beginPoint, distCode, endPoint, routeDesc })),// reqNo,
          agent: ApplyAgent,
          convoyPlanDTO: {// reqNo
            planDoc: ApplyOther.planDoc,
          },
          transPlanDTO: {// reqNo
            key: ApplyOther.key,
          }
        };

        // console.log('submit', this.form, submitData);
        saveGovApplication(submitData).then(() => {
          // console.log(res);
          Toast.success(
            {
              message: '申请成功',
              onClose: () => {
                this.$router.push('/home')
              }
            }
          );

        })
      })
    },
    saveCurForm() {
      const save = this.$refs.applyComp.save()
      return save.then((form) => {
        const { compName } = this;
        this.$set(this.form, compName, form)
      })
    },
    next() {
      this.saveCurForm().then(() => {
        let { active, list } = this;
        if (++active >= list.length) {
          active = list.length - 1
        }
        this.active = active
        this.toPage()
      })
    }
  }
}
</script>

<style lang="less" scoped>
.apply-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .apply-cont {
    position: relative;
    overflow: auto;
    padding-bottom: 10px;
  }
}
.page-title {
  font-size: 18px;
  padding: 10px;
  font-weight: bold;
  // border-bottom: 1px solid;
}
.apply-btns {
  padding: 10px;
}
.w-3em {
  & /deep/ .van-button__text {
    width: 3em;
  }
}
</style>